<template>
  <div>
    <div class="radio_content" v-if="classification[0]">
      <div class="label">一级分类></div>
      <el-radio-group v-model="selectedItem" class="groups">
        <el-radio
          v-for="item in classification"
          :label="item"
          :key="item.name"
          @change="changeRadio(item, 1)"
        >
          {{ item.name }}
        </el-radio>
      </el-radio-group>
    </div>

    <div v-if="selectedItem && selectedItem.children" class="radio_content">
      <div class="label">二级分类></div>
      <el-radio-group v-model="selectedChild" class="groups">
        <el-radio
          v-for="item in selectedItem.children"
          :label="item"
          :key="item.name"
          @change="changeRadio(item, 2)"
        >
          {{ item.name }}
        </el-radio>
      </el-radio-group>
    </div>
    <div v-if="selectedChild && selectedChild.children" class="radio_content">
      <div class="label">三级分类></div>
      <el-radio-group v-model="selectedGrandChild" class="groups">
        <el-radio
          v-for="item in selectedChild.children"
          :label="item"
          :key="item.name"
          @change="changeRadio(item, 3)"
        >
          {{ item.name }}
        </el-radio>
      </el-radio-group>
    </div>
  </div>
</template>

<script setup>
import { ref, defineProps, defineEmits } from "vue";

const emit = defineEmits(["update:modelValue"]);

const props = defineProps(["classification"]);

const selectedItem = ref(null);
const selectedChild = ref(null);
const selectedGrandChild = ref(null);
const changeRadio = (newValue, type) => {
  if (type === 1) {
    selectedChild.value = null;
    selectedGrandChild.value = null;
  }
  if (type === 2) {
    selectedGrandChild.value = null;
  }
  emit("update:modelValue", newValue);
};
</script>
<style scoped>
.radio_content {
  text-align: left;
  display: flex;
}
.groups {
  width: 400px;
}
.label {
  width: 90px;
}
</style>
